<template>
    <div>
        <h1>显示页面</h1>
        <a href="/add">新增页面</a>
        <a href="/login">登录页面</a>
    </div>
    用户名:<input type="text" v-model="pagedata.name">
    手机号:<input type="text" v-model="pagedata.phone">
    <input type="button" value="查询" @click="show">
    <table class="table">
        <thead>
            <tr>
                <td><input type="checkbox" value="" @click="selectstart"></td>
                <td>Id</td>
                <td>用户名</td>
                <td>昵称</td>
                <td>密码</td>
                <td>手机号</td>
                <td>图片</td>
                <td>创建日期</td>
                <td>角色</td>
                <td>是否删除</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="d in data">
                <td><input v-model="idarray" type="checkbox" :value="d.Id" ></td>
                <td>{{d.Id}}</td>
                <td>{{d.UserName}}</td>
                <td>{{d.NickName}}</td>
                <td>****</td>
                <td>{{d.Phone}}</td>
                <td><img :src="axios.defaults.baseURL+d.Img" style="width: 50px;"></td>
                <td>{{moment(d.CreateTime).format("yyyy-MM-DD")}}</td>
                <td>{{d.RoleName}}</td>
                <td>{{d.IsDelete}}</td>
                <td>
                    <input type="button" @click="update(d.Id)" value="修改">
                </td>
            </tr>
        </tbody>
    </table>
    共{{countdata.pagecount}}页，每页{{pagedata.pagesize}}条，共{{countdata.count}}条
    <input type="button" @click="pageindex(1)" value="首页">
    <input type="button" @click="pageindex(2)" value="上一页">
    <input type="number" v-model="pagedata.pageindex" @click="pagesizes" style="width: 50px;">
    <input type="button" @click="pageindex(3)" value="下一页">
    <input type="button" @click="pageindex(4)" value="尾页">
    <input type="button" value="批量删除" @click="dels">
    {{idarray}}
</template>

<script setup lang="ts">
import axios from 'axios';
import moment from 'moment';
import {ref,onMounted} from 'vue';
import { useRouter } from 'vue-router';
const router=useRouter();
onMounted(() => {
  show();  
})
const update=(mid:number)=>{
    alert(mid);
    router.push({path:'/update',query:{Id:mid}})
}
const selectstartdata=ref(false);
const selectstart=()=>{
    idarray.value=[];
    if(selectstartdata.value)
    {
        data.value.forEach((e)=>{
            idarray.value.push(e.Id)
        })
    }
    else
    {
        selectstartdata.value=[]//全取消
    }
}
const idarray=ref([]);
const dels=()=>{
    axios.get("/api/User/DeleteRangeUser",{params:{idstring:idarray.value.toString()}}).then(res=>{
        if(res.data>0)
        {
            alert('删除成功');
            show();
        }
        else
        {
            alert('删除失败');
            show();
        }
    })
}
const pagesizes=()=>{
    show();
}
const pageindex=(val:number)=>{
    if(val==1)
    {
        pagedata.value.pageindex=1;
        show();
    }
    if(val==2 && pagedata.value.pageindex>=1)
    {
        pagedata.value.pageindex--;
        show();
    }
    if(val==3 && pagedata.value.pageindex<countdata.value.pagecount)
    {
        pagedata.value.pageindex++;
        show();
    }
    if(val==4)
    {
        pagedata.value.pageindex=countdata.value.pagecount;
        show();
    }
}
const data=ref([{
      "Id": 0,
      "UserName": "",
      "NickName": "",
      "Password": "",
      "Phone": "",
      "Img": "",
      "CreateTime": "",
      "IsDelete": true,
      "rid": 0,
      "RoleName": ""
}])
const pagedata=ref({
    pageindex:1,
    pagesize:5,
    name:'',
    phone:''
})
const countdata=ref({
    count:0,
    pagecount:0
})
const show=()=>{
    axios.get("/api/User/UserShow",{params:pagedata.value}).then(res=>{
        data.value=res.data.Members;
        countdata.value.count=res.data.Count;
        countdata.value.pagecount=Math.ceil(countdata.value.count/pagedata.value.pagesize)
    })
}




</script>

<style scoped>

</style>